<template>
  <div>
    <h2>自定义指令</h2>
    <!-- v-color就是一个自定义指令 -->
    <p v-color=""></p>
    <input type="text" v-focus />
    <hr />
    <MyRight></MyRight>
  </div>
</template>

<script>
import MyRight from "@/components/MyRight.vue";
export default {
  components: {
    MyRight,
  },
  //存放自定义指令的节点
  directives: {
    // 指令: {
    //   //两个形参 el表示使用这个指令的元素 obj.value表示指令的值
    //   //bind只会执行一次，可以做一些初始化的操作（可以在里面设置一些样式）
    //   bind(el, obj) {},
    //   //inserted只会执行一次（对元素进行行为操作（js操作，获得焦点之类的））
    //   inserted(el, obj) {},
    //   //update 数据更新后会执行(数据更新后，子组件的数据不一定更新，执行)
    //   update(el, obj) {},
    //   //数据更新后，包括了组件的数据也更新后会执行
    //   componentUpdated(el, obj) {},
    //   //指令解绑的时候执行
    //   unbind(el, obj) {},
    // },

    //函数写法相当于bind和update方法
    //如果指令中只有这两个方法，可以写函数形式
    // 函数写法指令(el, obj) {},

    //声明的自定义指令（对象格式）
    // color: {
    //   bind(el, obj) {
    //     el.style.color = obj.value;
    //   },
    //   update(el, obj) {
    //     el.style.color = obj.value;
    //   },
    // },

    //声明的自定义指令 （函数格式）
    // color(el, obj) {
    //   el.style.color = obj.value;
    // },

    focus: {
      //利用自定义指令给input获取焦点
      inserted(el) {
        el.focus();
      },
    },
  },
};
</script>

<style>
</style>